import React from 'react'
// 6. 把handle定义在组件外面(不行)
const handle = () => {
  this.setState({
    count: this.state.count + 1,
  })
}
export default class Count extends React.Component {
  constructor() {
    super()
    this.state = {
      //状态对象里面的属性就可以随便写
      count: 1,
    }
    // 2. 写在构造器中,函数是箭头函数(可以)(每个Count实例都有一个handle)
    // this.handle = () => {
    //   this.setState({
    //     count: this.state.count + 1,
    //   })
    // }

    // 3. 在第一种解决方案的基础上,添加这行代码(可以)(每个组件实例都有handle,原型上也有)
    // this.handle = this.handle.bind(this)
  }
  // 1. 写在类的结构体里面(不行)
  // handle是添加到了原型上
  handle() {
    // console.log('handle触发了')
    this.setState({
      count: this.state.count + 1,
    })
  }
  render() {
    // 5. handle函数定义在render中(可以)(点击按钮,执行setState,render重新执行,短时间内内存中有大量的handle)
    // const handle = () => {
    //   this.setState({
    //     count: this.state.count + 1,
    //   })
    // }
    return (
      <div>
        <p id="c">{this.state.count}</p>
        {/* 4. 利用bind绑定this (可以)(原型上有,每一次注册事件也都会创建出来一个新函数) */}
        {/* <button onClick={this.handle.bind(this)}>+</button> */}
        <button onClick={handle}>+</button>
      </div>
    )
  }
}
